<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom);
        var option = null;
        myChart.showLoading();
        $.get('life-expectancy.json', function (data) {
            myChart.hideLoading();
            var itemStyle = {
                opacity: 0.8,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            };
            var sizeFunction = function (x) {
                var y = Math.sqrt(x / 5e8) + 0.1;
                return y * 80;
            };
            // Schema:
            var schema = [{
                    name: 'Income',
                    index: 0,
                    text: '人均收入',
                    unit: '美元'
                },
                {
                    name: 'LifeExpectancy',
                    index: 1,
                    text: '人均寿命',
                    unit: '岁'
                },
                {
                    name: 'Population',
                    index: 2,
                    text: '总人口',
                    unit: ''
                },
                {
                    name: 'Country',
                    index: 3,
                    text: '国家',
                    unit: ''
                }
            ];
            option = {
                baseOption: {
                    timeline: {
                        axisType: 'category',
                        orient: 'vertical',
                        autoPlay: true,
                        inverse: true,
                        playInterval: 1000,
                        left: null,
                        right: 0,
                        top: 20,
                        bottom: 20,
                        width: 55,
                        height: null,
                        label: {
                            color: '#999'
                        },
                        symbol: 'none',
                        lineStyle: {
                            color: '#555'
                        },
                        checkpointStyle: {
                            color: '#bbb',
                            borderColor: '#777',
                            borderWidth: 2
                        },
                        controlStyle: {
                            showNextBtn: false,
                            showPrevBtn: false,
                            color: '#666',
                            borderColor: '#666'
                        },
                        emphasis: {
                            label: {
                                color: '#fff'
                            },
                            controlStyle: {
                                color: '#aaa',
                                borderColor: '#aaa'
                            }
                        },
                        data: []
                    },
                    backgroundColor: '#404a59',
                    title: [{
                        text: data.timeline[0],
                        textAlign: 'center',
                        left: '63%',
                        top: '55%',
                        textStyle: {
                            fontSize: 100,
                            color: 'rgba(255, 255, 255, 0.7)'
                        }
                    }, {
                        text: '各国人均寿命与GDP关系演变',
                        left: 'center',
                        top: 10,
                        textStyle: {
                            color: '#aaa',
                            fontWeight: 'normal',
                            fontSize: 20
                        }
                    }],
                    tooltip: {
                        padding: 5,
                        backgroundColor: '#222',
                        borderColor: '#777',
                        borderWidth: 1,
                        formatter: function (obj) {
                            var value = obj.value;
                            return schema[3].text + '：' + value[3] + '<br>' +
                                schema[1].text + '：' + value[1] + schema[1].unit + '<br>' +
                                schema[0].text + '：' + value[0] + schema[0].unit + '<br>' +
                                schema[2].text + '：' + value[2] + '<br>';
                        }
                    },
                    grid: {
                        top: 100,
                        containLabel: true,
                        left: 30,
                        right: '110'
                    },
                    xAxis: {
                        type: 'log',
                        name: '人均收入',
                        max: 100000,
                        min: 300,
                        nameGap: 25,
                        nameLocation: 'middle',
                        nameTextStyle: {
                            fontSize: 18
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} $'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '平均寿命',
                        max: 100,
                        nameTextStyle: {
                            color: '#ccc',
                            fontSize: 18
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value} 岁'
                        }
                    },
                    visualMap: [{
                        show: false,
                        dimension: 3,
                        categories: data.counties,
                        calculable: true,
                        precision: 0.1,
                        textGap: 30,
                        textStyle: {
                            color: '#ccc'
                        },
                        inRange: {
                            color: (function () {
                                var colors = ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8',
                                    '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489',
                                    '#928ea8', '#bda29a'
                                ];
                                return colors.concat(colors);
                            })()
                        }
                    }],
                    series: [{
                        type: 'scatter',
                        itemStyle: itemStyle,
                        data: data.series[0],
                        symbolSize: function (val) {
                            return sizeFunction(val[2]);
                        }
                    }],
                    animationDurationUpdate: 1000,
                    animationEasingUpdate: 'quinticInOut'
                },
                options: []
            };
            for (var n = 0; n < data.timeline.length; n++) {
                option.baseOption.timeline.data.push(data.timeline[n]);
                option.options.push({
                    title: {
                        show: true,
                        'text': data.timeline[n] + ''
                    },
                    series: {
                        name: data.timeline[n],
                        type: 'scatter',
                        itemStyle: itemStyle,
                        data: data.series[n],
                        symbolSize: function (val) {
                            return sizeFunction(val[2]);
                        }
                    }
                });
            }
            myChart.setOption(option);
        });
        if (option && typeof option === 'object') {
            myChart.setOption(option, true);
        }

    </script>
</body>

</html>
